<template>
  <div class="content">
    <div style="
          width: 100%;
          height: 100%;
          position: fixed;
          top: 0;
          left: 0;
          background-color: rgba(0, 0, 0, 0.7);
          padding: 20px;
          display: flex;
          z-index:999;
          flex-direction: column;
          align-items: center;
          justify-content: center;"
         :append-to-body="true"
    >
      <div class="cover">
        <div class="cover-top">
          <div class="top-left">
            <div class="sign"></div>
            <div class="title" v-if="title=='岗位总数'">{{ title }}</div>
          </div>
          <div class="top-right" @click="onCloseDialog">×</div>
        </div>

        <div class="cover-bottom">
          <el-table
              :data="tableData"
              style="width: 100%;">
            <el-table-column
                prop="id"
                width="80"
                label="序号"
            >
            </el-table-column>
            <el-table-column
                prop="jobTitle"
                label="岗位名称"
            >
            </el-table-column>
            <el-table-column
                prop="comName"
                label="所属企业"
            >
            </el-table-column>
            <el-table-column width="110"
                             prop="eductionText"
                             label="学历要求"
            >
            </el-table-column>

            <el-table-column width="140"
                             prop="minSalary,maxSalary"
                             label="月薪（元）"
            >
              <template slot-scope="scope">
                {{ scope.row.minSalary }}-{{ scope.row.maxSalary }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="paging">
          <el-pagination
              background
              :page-size="limit"
              layout="prev, pager, next"
              prev-text="上一页"
              next-text="下一页"
              :total="count"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="this.page">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  allPostListApi,
} from "@/api/statistics-3";

export default {
  name: "CoverJob4",
  props: ['id', 'closeDialog2', 'title', 'name'],
  data() {
    return {
      count: 2,
      page: 1,
      limit: 7,
      isShow: true,
      value: '',
      options: [],
      tableData: [
      ]
    }
  },
  methods: {
    onCloseDialog() {
      this.closeDialog2(0)
    },
    close() {
      this.isShow = false
    },
    handleSizeChange(e) {
      this.limit = e
      this.getList()
    },
    handleCurrentChange(e) {
      this.page = e
      sessionStorage.setItem('currentPage', this.page)
      this.getList()
    },
    getList() {
      //全部岗位
        allPostListApi({
          page: this.page,
          limit: this.limit,
          communityId: this.communityId,
          streetId: this.streetId
        }).then((res) => {
          if (res.code === 200) {
            this.tableData = res.data.records
            this.count = res.data.total
          }
        })
    }
  },
  mounted() {
    this.fairActive = this.id
    this.getList()
  },

}
</script>

<style lang="scss" scoped>
.content {
  .cover {
    position: relative;
    width: 52%;
    min-height: 55%;
    height: auto;
    background-color: #0A1456;
    border-radius: 15px;
    padding: 20px;

    .cover-top {
      display: flex;
      justify-content: space-between;

      .top-left {
        display: flex;

        .sign {
          background-color: #498CF3;
          width: 10px;
          height: 20px;
          border-radius: 15px;
          margin-right: 15px;
        }

        .title {
          color: #ffffff;
        }
      }

      .top-right {
        color: #2FA1F9;
        font-size: 20px;
        cursor: pointer;
        margin-right: 5px;
      }
    }

    .cover-middle {
      display: flex;
      margin: 20px 0;

      .street {
        color: #ffffff;
        margin-right: 20px;

        ::v-deep {
          .el-input__icon {
            height: 116%;
          }

          .el-input__inner {
            display: flex;
            align-items: center;
            background-color: #0A1456;
            border: 1px solid #216CBB;
            height: 30px;
            width: 120px;
          }

          .el-select-dropdown__list {
            background-color: #0A1456;

          }
        }
      }

      .village {
        color: #ffffff;

        ::v-deep {
          .el-input__icon {
            height: 116%;
          }

          .el-input__inner {
            display: flex;
            align-items: center;
            background-color: #0A1456;
            border: 1px solid #216CBB;
            height: 30px;
            width: 120px;
          }

          .el-select-dropdown__list {
            background-color: #0A1456;

          }
        }
      }
    }

    .cover-bottom {
      width: 100%;
      height: calc(100% - 60px);
      overflow: hidden;

      ::v-deep {
        .el-table th.el-table__cell {
          background-color: rgba(72, 75, 147, 0.5);
          text-align: center;
          color: #fff;
        }

        .el-table tr {
          background-color: #0A1456;
        }

        .el-table .el-table__cell {
          background-color: #0A1456;
          border-bottom: 1px solid #394276;
          text-align: center;
        }

        .el-table .cell {
          color: #fff;
        }
      }
    }

    .paging {
      display: flex;
      justify-content: center;
      margin-top: 10px;

      ::v-deep {
        .el-pagination.is-background .btn-prev {
          background-color: rgba(72, 75, 147, 0.5);
          padding: 0 10px;
        }

        .el-pagination.is-background .btn-prev span {
          color: #fff;
        }

        .el-pagination.is-background .btn-next {
          background-color: rgba(72, 75, 147, 0.5);
          padding: 0 10px;
        }

        .el-pagination.is-background .btn-next span {
          color: #fff;
        }
      }
    }
  }
}
</style>
